<template>
  <div class='card-panel'>
    <div :class="iconStyle" class="card-panel-icon-wrapper">
      <div class="card-panel-icon-wrapper2">
        <SvgIcon :icon="iconClass"/>
      </div>
    </div>
    <div class="card-panel-desc">
      <span class="card-panel-val">{{ formatNumber(modelValue || 0) }}</span>
      <span class="card-panel-text">{{ panelText }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { SvgIcon } from '@/components/icon';

const props = defineProps({
  modelValue: {
    type: Number,
  },
  panelText: {
    type: String,
    default: '',
    required: true
  },
  decimals: {
    type: Number,
    default: 2
  },
  separator: {
    type: String,
    default: ',',
  },
  prefix: {
    type: String,
    default: ''
  },
  suffix: {
    type: String,
    default: '',
  },
  iconClass: {
    type: String,
    default: 'example',
    required: true
  },
  iconStyle: {
    type: String
  }
});

const isNumber = (val: any) => {
  return !isNaN(parseFloat(val))
}

const formatNumber = (val: Number) => {
  let num = val.toFixed(props.decimals);
  num += '';
  const x = num.split('.');
  let x1 = x[0];
  const x2 = x.length > 1 ? '.' + x[1] : '';
  const rgx = /(\d+)(\d{3})/;
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2');
    }
  }
  return props.prefix + x1 + x2 + props.suffix;
}
</script>

<style lang="scss" scoped>
html.dark .card-panel {
  --bg-color: var(--el-bg-color-overlay);
}

.card-panel {
  --bg-color: var(--el-fill-color-blank);
  --gb-color-mian: #fae3ed;
  --gb-color-minor: #ff85c0;

  --bg-color1-mian: #fae3ed;
  --bg-color1-minor: #ff85c0;

  --bg-color2-mian: #e4ecff;
  --bg-color2-minor: #1a53ff;

  --bg-color3-mian: #eaf9e1;
  --bg-color3-minor: #67c23a;

  --bg-color4-mian: #fff3e0;
  --bg-color4-minor: #e6a23c;

  --bg-color5-mian: #f8e0e0;
  --bg-color5-minor: #f56c6c;

  --bg-color6-mian: #f1e4ff;
  --bg-color6-minor: #b37feb;

  height: 78px;
  position: relative;
  border-radius: 4px;
  background-color: var(--bg-color);
  overflow: hidden;
  transition: var(--el-transition-duration);
  display: flex;
  align-items: center;
  padding: 0 0 0 21px;

  .card-panel-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 21px;

    .card-panel-icon-wrapper2 {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      .svg-icon {
        font-size: 18px;
        color: #fff;
      }
    }
  }

  .card-panel-desc {

    .card-panel-val {
      display: block;
      color: var(--el-text-color-primary);
      font-size: 21px;
      margin-bottom: 3px;
    }

    .card-panel-text {
      display: block;
      color: #98a9bc;
      font-size: 12px;
    }
  }
}

.style1 {
  background: var(--bg-color1-mian);

  .card-panel-icon-wrapper2 {
    background: var(--bg-color1-minor);
  }
}

.style2 {
  background: var(--bg-color2-mian);

  .card-panel-icon-wrapper2 {
    background: var(--bg-color2-minor);
  }
}

.style3 {
  background: var(--bg-color3-mian);

  .card-panel-icon-wrapper2 {
    background: var(--bg-color3-minor);
  }
}

.style4 {
  background: var(--bg-color4-mian);

  .card-panel-icon-wrapper2 {
    background: var(--bg-color4-minor);
  }
}

.style5 {
  background: var(--bg-color5-mian);

  .card-panel-icon-wrapper2 {
    background: var(--bg-color5-minor);
  }
}

.style6 {
  background: var(--bg-color6-mian);

  .card-panel-icon-wrapper2 {
    background: var(--bg-color6-minor);
  }
}

/* 只有黑暗模式才显示 */
.dark {
  .style1 {
    --gb-color-mian: var(--bg-color1-mian);
    --gb-color-minor: var(--bg-color1-minor);
    animation: glowing-border-animation 3s ease-in-out infinite;
  }

  .style2 {
    --gb-color-mian: var(--bg-color2-mian);
    --gb-color-minor: var(--bg-color2-minor);
    animation: glowing-border-animation 3s ease-in-out infinite;
  }

  .style3 {
    --gb-color-mian: var(--bg-color3-mian);
    --gb-color-minor: var(--bg-color3-minor);
    animation: glowing-border-animation 3s ease-in-out infinite;
  }

  .style4 {
    --gb-color-mian: var(--bg-color4-mian);
    --gb-color-minor: var(--bg-color4-minor);
    animation: glowing-border-animation 3s ease-in-out infinite;
  }

  .style5 {
    --gb-color-mian: var(--bg-color5-mian);
    --gb-color-minor: var(--bg-color5-minor);
    animation: glowing-border-animation 3s ease-in-out infinite;
  }

  .style6 {
    --gb-color-mian: var(--bg-color6-mian);
    --gb-color-minor: var(--bg-color6-minor);
    animation: glowing-border-animation 3s ease-in-out infinite;
  }
}

/* 定义发光边框的动画 */
@keyframes glowing-border-animation {
  0% {
    border-color: var(--gb-color-mian);
    box-shadow: 0 0 8px var(--gb-color-mian)
  }
  50% {
    border-color: var(--gb-color-minor);
    box-shadow: 0 0 12px var(--gb-color-minor);
  }
  100% {
    border-color: var(--gb-color-mian);
    box-shadow: 0 0 8px var(--gb-color-mian)
  }
}
</style>
